<template>
	<div>
		<div class="productlist-wrapper" v-if="productList.length">
			<div v-for="(item,index) in productList" :key="index" class="product-item">
				<div class="img-wrapper">
					<van-image :src="item.img" width="100%" height="200"></van-image>
				</div>
				<div class="describe-wrapper">
					<van-image :src="img.isAutarky" width="30" height="16" v-show="item.isAutarky" class="icon">
					</van-image><span class="text">{{item.describe}}</span>
				</div>
				<div class="price-wrapper">
					<div class="price-left">
						<span class="text-icon">￥</span>
						<span class="text-price">{{item.price}}</span>
						<div v-show="item.isActivity" class="text-activity-name">
							{{item.activityName}}
						</div>
					</div>
					<div class="btn-right">看相似</div>
				</div>
				<div class="discount-wrapper">
					<div v-show="item.isDiscount">
						<span class="text-icon">￥</span>
						<span
							class="text-discount-price">{{item.discountPrice!=undefined? item.discountPrice:'???'}}</span>
						<van-image :src="img.plus" width="30" height="10" style="vertical-align: top;"></van-image>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ProductList',
		props: {
			productList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				img: {
					isAutarky: require('@/assets/home/productiList/autarky.png'),
					plus: require('@/assets/home/productiList/plus.png'),
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productlist-wrapper {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		padding: 10px 3%;

		.product-item {
			flex: 0 0 48%;
			background-color: #FFFFFF;
			margin-bottom: 10px;
			overflow: hidden;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;

			.img-wrapper {
				width: 100%;
				height: 200px;

			}

			.describe-wrapper {
				display: flex;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				height: 40px;

				.icon {
					vertical-align: middle;
					margin-right: 5px;
				}

				.text {
					font-size: 14px;
				}
			}

			.price-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 6px;
				height: 20px;

				.price-left {
					display: flex;
					align-items: center;

					.text-icon {
						font-size: 12px;
						color: #EE0A24;
					}

					.text-price {
						font-size: 16px;
						color: #EE0A24;
						font-weight: 600;
					}

					.text-activity-name {
						font-size: 12px;
						color: red;
						padding: 0 5px;
						border-radius: 4px;
						border: 1px solid red;
						margin-left: 5px;
					}
				}

				.btn-right {
					font-size: 13px;
					color: #969799;
					padding: 2px 5px;
					background-color: #e5e5e5;
					border-top-left-radius: 10px;
					border-bottom-left-radius: 10px;
				}
			}

			.discount-wrapper {
				height: 20px;
				margin-top: 10px;

				.text-icon {
					font-size: 12px;
				}

				.text-discount-price {
					font-size: 14px;
					font-weight: 600;
				}
			}
		}
	}
</style>
